<template>
    <div>
        <div id="chartSix" ref="chartSix"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div style="letter-spacing: 1px font-weight: 900">
                    月结类型：
                    <i style="
                            font-size: 16px;
                            font-weight: 900;
                            color: #ff4040;
                        ">2</i>
                    个
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        name: "echartStorage",
        created() {

        },
        mounted() {
            this.initCharts();
        },
        updated() { },
        data() {
            return {
                data: [
                    
                ],
                
            };
        },
   
        methods: {
            //设置图表
            initCharts() {
                let that = this;

                  let chartSix = that.$echarts.init(that.$refs.chartSix);
                let option = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '30%']
                    },
                    visualMap: {
                        type: 'piecewise',
                        show: false,
                        dimension: 0,
                        seriesIndex: 0,
                        pieces: [
                            {
                                gt: 1,
                                lt: 3,
                                color: 'rgba(0, 0, 180, 0.4)'
                            },
                            {
                                gt: 5,
                                lt: 7,
                                color: 'rgba(0, 0, 180, 0.4)'
                            }
                        ]
                    },
                    series: [
                        {
                            type: 'line',
                            smooth: 0.6,
                            symbol: 'none',
                            lineStyle: {
                                color: '#5470C6',
                                width: 5
                            },
                            markLine: {
                                symbol: ['none', 'none'],
                                label: { show: false },
                                data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
                            },
                            areaStyle: {},
                            data: [
                                ['2021-10-10', 200],
                                ['2021-10-11', 560],
                                ['2021-10-12', 750],
                                ['2021-10-13', 580],
                                ['2021-10-14', 250],
                                ['2021-10-15', 300],
                                ['2021-10-16', 450],
                                ['2021-10-17', 300],
                                ['2021-10-18', 100]
                            ]
                        }
                    ]
                };
                // console.log(option);
                chartSix.setOption(option);
            },
        },
    };
</script>
<style lang="scss" scoped>
    #chartSix {
        width: 900px;
        height: 390px;
    }
</style>